<template>
	<div class="content">
		<h1>技术支持</h1>
		<div>
			这次这个网页用vue项目建立，使用组件式开发，运用到了vue-router技术和pinia技术，
			更多的理解到了vue在现实中的运用，也感谢自己努力奉献，继续加油,
			展示一个小魔方
		</div>
		<div class="center">
			<div class="rubik_cube" ref="cl">
				<div class="rubik_cube1">1</div>
				<div class="rubik_cube2">2</div>
				<div class="rubik_cube3">3</div>
				<div class="rubik_cube4">4</div>
				<div class="rubik_cube5">5</div>
				<div class="rubik_cube6">6</div>
			</div>
		</div>
		<div class="control" @click="handle">
			<el-button>让立方体旋转</el-button>
		</div>

	</div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
const cl = ref(null)
const sum = ref(0)
const handle = () => {
	sum.value += 135
}
const a = watch(sum, (newvalue, oldvalue) => {
	cl.value.style.transform = `rotateY(${newvalue}deg) rotateX(${45}deg)`;
})
</script>

<style scoped>
.control {
	text-align: center;
}

.center {
	display: flex;
	justify-content: center;
}

.content {
	position: relative;
	width: 100%;

}

.rubik_cube {
	transform-style: preserve-3d;
	margin-top: 200px;
	width: 400px;
	height: 400px;
	background-color: pink;
	transform: rotateX(45deg) rotateY(45deg);
	position: absolute;
	transition: all 1s;
}

.rubik_cube div {
	width: 400px;
	height: 400px;
	position: absolute;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}

.rubik_cube1 {
	transform: translateX(200px) rotateY(90deg);
	background: url('@/img/9.jpg');

}

.rubik_cube2 {
	transform: translateX(-200px) rotateY(-90deg);
	background: url('@/img/3.jpg');

}

.rubik_cube3 {
	transform: translateY(200px) rotateX(90deg);
	background: url('@/img/6.jpg');

}

.rubik_cube4 {
	transform: translateY(-200px) rotateX(90deg);
	background: url('@/img/7.jpg');

}

.rubik_cube5 {
	transform: translateZ(200px);
	background: url('@/img/10.jpg');

}

.rubik_cube6 {
	transform: translateZ(-200px);
	background: url('@/img/8.jpg');

}
</style>